import { DownOutlined, SmileOutlined } from '@ant-design/icons';
import { Dropdown, Space } from 'antd';
import {  useNavigate} from 'react-router-dom'

const AntdDropMenu = () => {
  const navigate = useNavigate()
  
  const logout = () => {
    navigate('/theme')
  }
  const items = [
    {
      key: '1',
      label: (
        <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
          1st menu item
        </a>
      ),
    },
    {
      key: '2',
      label: (
        <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
          2nd menu item (disabled)
        </a>
      ),
      icon: <SmileOutlined />,
      disabled: true,
    },
    {
      key: '3',
      label: (
        <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
          3rd menu item (disabled)
        </a>
      ),
      disabled: true,
    },
    {
      key: '4',
      danger: true,
      label: (<span onClick={logout}>退出登录</span>),
      
    },
  ];
  

return ( <Dropdown
    menu={{
      items,
    }}
  >

      <Space>
        Hover me
        <DownOutlined />
      </Space>
  </Dropdown>)
 
}
export default AntdDropMenu;